<template>
	<div class="login">
		<!-- 未登录头像 -->
		<div class="avatar" v-if="!userInfo" @click="showLogin">
			<div class="block">
				<el-avatar :size="40" :src="circleUrl"></el-avatar>
			</div>
			<div class="uname">{{ uname }}</div>
		</div>
		<!-- 已登录头像 -->
		<div class="avatar" v-else>
			<div @click="toUserDetail">
				<el-avatar :size="40" :src="userInfo.avatarUrl"></el-avatar>
			</div>
			<div class="uname" @click="showUserPop" id="showuserpop">{{ userInfo.nickname }} <i class="el-icon-caret-bottom"></i></div>
		</div>
		<!-- 登录表单弹框 -->
		<transition name="el-fade-in-linear">
			<LoginPop v-if="isShowLogin" @closeLogin="closeLogin" />
		</transition>
		<!-- 展示个人信息弹框 -->
		<transition name="el-fade-in-linear">
			<UserPop v-if="showUserpop" @closeuserPop="isShowUserPop" />
		</transition>
	</div>
</template>

<script setup>
import { ref,computed } from 'vue';
import { useStore } from 'vuex';
import LoginPop from './LoginPop.vue';
// import UserPop from './UserPop.vue';
// import register from '@/assets/imgs/register.png';

const store = useStore();
// 将 store 中的 getter 映射到局部计算属性
const userInfo = computed(() => store.getters.userInfo);

const circleUrl ="https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png";
const uname = "点击登录";
const isShowLogin = ref(false);
const showUserpop = ref(false);

const showLogin = () => {
  isShowLogin.value = true;
};

const closeLogin = () => {
  isShowLogin.value = false;
};

// const showUserPop = () => {
//   showUserpop.value =!showUserpop.value;
// };

// const isShowUserPop = () => {
//   showUserpop.value = false;
// };

const toUserDetail = () => {
  try {
    router.push(`/userdetail/${userInfo.value.userId}`);
  } catch (err) {
    console.error(err);
  }
};
</script>

<style lang="less" scoped>
.login {
	padding-right: 2%;
}

.avatar {
	display: flex;
	align-items: center;
	cursor: pointer;
	.uname {
    color: #000;
		padding-left: 5px;
    white-space: nowrap; //强制不换行
	}
}
</style>
